<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0061: Cairo V – Toy Text API and Image Formats | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0061: Cairo V – Toy Text API and Image Formats" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="GTK Tutorial on using Cairo’s Toy Text API." />
<meta property="og:description" content="GTK Tutorial on using Cairo’s Toy Text API." />
<link rel="canonical" href="http://localhost:4000/posts/0061-cairo-v-toy-text-image-formats.html" />
<meta property="og:url" content="http://localhost:4000/posts/0061-cairo-v-toy-text-image-formats.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-08-13T00:00:00-04:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0061: Cairo V – Toy Text API and Image Formats" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-08-13T00:00:00-04:00","datePublished":"2019-08-13T00:00:00-04:00","description":"GTK Tutorial on using Cairo’s Toy Text API.","headline":"0061: Cairo V – Toy Text API and Image Formats","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0061-cairo-v-toy-text-image-formats.html"},"url":"http://localhost:4000/posts/0061-cairo-v-toy-text-image-formats.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" /><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" /></head>
<body><header class="site-header" role="banner">

  <div class="wrapper"><a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger"><a class="page-link" href="../about.html">About</a><a class="page-link" href="../index-reverse.html">Posts in Date Order</a><a class="page-link" href="../topics.html">Blog Posts by Topic</a></div>
      </nav></div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/cairo.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-08-13T00:00:00-04:00" itemprop="datePublished">Tuesday, August 13, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0061-cairo-v--toy-text-api-and-image-formats">0061: Cairo V – Toy Text API and Image Formats</h1>

<p>These two topics are related in that, after a short intro to <em>Cairo</em>’s toy text API, we use it to print a list of available image formats on our <em>GTK</em> window. So, let’s start with…</p>

<h2 id="cairos-toy-text-api"><em>Cairo</em>’s Toy Text API</h2>

<!-- 0, 1 -->
<!-- first occurrence of application and terminal screenshots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/018_cairo/cairo_15.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																	<!-- modal# -->
				<span class="close0">&times;</span>															<!-- close# -->
				<img class="modal-content" id="img00" />															<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");														// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");															// img#
			var modalImg = document.getElementById("img00");													// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];											// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/018_cairo/cairo_15_term.png" alt="Current example terminal output" />		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																				<!-- modal# -->
				<span class="close1">&times;</span>																		<!-- close# -->
				<img class="modal-content" id="img11" />																		<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																	// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																		// img#
			var modalImg = document.getElementById("img11");																// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];														// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																								<!-- ------------- filename (below) --------- -->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_15_text.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for first (1st) occurrence of application and terminal screen shots on a single page -->

<p><em>Cairo</em>’s text API has its limitations and thus it’s referred to as a toy. Doesn’t matter to me because I just wanna get some text all up in my context, so let’s just do it.</p>

<p>To write text in a <em>Cairo</em> <code class="language-plaintext highlighter-rouge">DrawingArea</code>, you need to do this:</p>

<ul>
  <li>select a font,</li>
  <li>set the font size,</li>
  <li>set a text color,</li>
  <li>pick a place to write it, and</li>
  <li>call <code class="language-plaintext highlighter-rouge">showText()</code>.</li>
</ul>

<p>If you wanna get fancy about it, like centering the text, you need to go a few extra steps.</p>

<h3 id="text-extents">Text Extents</h3>

<p>What it is: it’s the amount of space the text will take up in the <code class="language-plaintext highlighter-rouge">DrawingArea</code>.</p>

<p>How it’s calculated:</p>

<ul>
  <li>do all the font settings from the first list above,</li>
  <li>get the width and height of the <code class="language-plaintext highlighter-rouge">DrawingArea</code>,</li>
  <li>ask the <code class="language-plaintext highlighter-rouge">Context</code>’s <code class="language-plaintext highlighter-rouge">textExtents()</code> function how much screen real estate the text will take up, and</li>
  <li>calculate where to place the text by subtracting the text extents width and height from the <code class="language-plaintext highlighter-rouge">DrawingArea</code>’s width and height.</li>
</ul>

<p>And when you roll all that up into a callback, it looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kt">bool</span> <span class="n">onDraw</span><span class="p">(</span><span class="n">Scoped</span><span class="p">!</span><span class="n">Context</span> <span class="n">context</span><span class="p">,</span> <span class="n">Widget</span> <span class="n">w</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">getAllocation</span><span class="p">(</span><span class="n">size</span><span class="p">);</span>
	
	<span class="c1">// set the font, size, and color</span>
	<span class="n">context</span><span class="p">.</span><span class="n">selectFontFace</span><span class="p">(</span><span class="s">"Comic Sans MS"</span><span class="p">,</span> <span class="n">CairoFontSlant</span><span class="p">.</span><span class="n">NORMAL</span><span class="p">,</span> <span class="n">CairoFontWeight</span><span class="p">.</span><span class="n">NORMAL</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setFontSize</span><span class="p">(</span><span class="mi">35</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">setSourceRgb</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">,</span> <span class="mf">1.0</span><span class="p">);</span>

	<span class="c1">// find the dimensions of the text so we can center it</span>
	<span class="n">context</span><span class="p">.</span><span class="n">textExtents</span><span class="p">(</span><span class="s">"Hello World"</span><span class="p">,</span> <span class="p">&amp;</span><span class="n">extents</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="n">size</span><span class="p">.</span><span class="n">width</span> <span class="p">/</span> <span class="mi">2</span> <span class="p">-</span> <span class="n">extents</span><span class="p">.</span><span class="n">width</span> <span class="p">/</span> <span class="mi">2</span><span class="p">,</span> <span class="n">size</span><span class="p">.</span><span class="n">height</span> <span class="p">/</span> <span class="mi">2</span> <span class="p">-</span> <span class="n">extents</span><span class="p">.</span><span class="n">height</span> <span class="p">/</span> <span class="mi">2</span><span class="p">);</span>
	<span class="n">context</span><span class="p">.</span><span class="n">showText</span><span class="p">(</span><span class="s">"Hello World"</span><span class="p">);</span>
				
	<span class="k">return</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
		
<span class="p">}</span> <span class="c1">// onDraw()</span>
</code></pre></div></div>

<p><code class="language-plaintext highlighter-rouge">Cairo</code>’s toy text API always left-justifies text, so if we want to center it or right justify, we’re on our own as the above calculations show. But then, this API isn’t about getting fancy; for that, we have <em>Pango</em> which we’ll deal with sometime down the road.</p>

<h3 id="initializations">Initializations</h3>

<p>The only other thing we need to do is initialize a couple of variables at the top of the class:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">GtkAllocation</span> <span class="n">size</span><span class="p">;</span>
<span class="n">cairo_text_extents_t</span> <span class="n">extents</span><span class="p">;</span>
</code></pre></div></div>

<p>Now let’s move on and do some preliminary work for the up-coming mini-series within the <em>Cairo</em> series, loading and saving images, which is what we’ll do in the next post.</p>

<h3 id="writing-a-list-of-text-items-to-a-drawingarea">Writing a List of Text Items to a DrawingArea</h3>

<!-- 2, 3 -->
<!-- second occurrence of application and terminal screenshots on a single page -->
<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img2" src="../images/screenshots/018_cairo/cairo_16.png" alt="Current example output" />		<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal2" class="modal">																<!-- modal# -->
				<span class="close2">&times;</span>														<!-- close# -->
				<img class="modal-content" id="img22" />														<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal2");													// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img2");														// img#
			var modalImg = document.getElementById("img22");												// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close2")[0];										// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img3" src="../images/screenshots/018_cairo/cairo_16_term.png" alt="Current example terminal output" /> 		<!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal3" class="modal">																			<!-- modal# -->
				<span class="close3">&times;</span>																	<!-- close# -->
				<img class="modal-content" id="img33" />																	<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal3");																// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img3");																	// img#
			var modalImg = document.getElementById("img33");															// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close3")[0];													// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																							<!--------- filename (below) ------------>
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/018_cairo/cairo_16_list_formats.d" target="_blank">here</a>.
	</div>
</div>
<!-- end of snippet for second (2nd) occurrence of application and terminal screenshots on a single page -->

<p>We’re going to need a few extra bits and bobs of data to get this to work. Besides a <code class="language-plaintext highlighter-rouge">GtkAllocation</code> to retrieve <code class="language-plaintext highlighter-rouge">DrawingArea</code> dimensions, we also need:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">Pixbuf</span> <span class="n">pixbuf</span><span class="p">;</span>
<span class="n">ListSG</span> <span class="n">formatList</span><span class="p">;</span>
<span class="n">PixbufFormat</span> <span class="n">pixbufFormat</span><span class="p">;</span>
<span class="n">PixbufFormat</span><span class="p">[]</span> <span class="n">pixbufFormats</span><span class="p">;</span>
</code></pre></div></div>

<p>Here’s what they are and why we need them:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">pixbuf</code> is a buffer associated with a <em>Cairo</em> <code class="language-plaintext highlighter-rouge">Surface</code>… effectively, it’s an image buffer tied to the <code class="language-plaintext highlighter-rouge">DrawingArea</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">formatList</code> is a singly-linked list of objects (<code class="language-plaintext highlighter-rouge">ListSG</code>), each of which can hold various types of data, in this case, each holds a string, the name of a format, and</li>
  <li><code class="language-plaintext highlighter-rouge">pixbufFormat</code> and <code class="language-plaintext highlighter-rouge">pixbufFormats</code> are there so we can use a <code class="language-plaintext highlighter-rouge">foreach()</code> loop to step through and get the names of the formats.</li>
</ul>

<p>The callback is a bit involved, so let’s look at it in chunks… although not all of this will be in the same order it appears in the code.</p>

<h3 id="callback-chunk-1">Callback Chunk #1</h3>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">getAllocation</span><span class="p">(</span><span class="n">size</span><span class="p">);</span>
<span class="n">pixbuf</span> <span class="p">=</span> <span class="n">getFromSurface</span><span class="p">(</span><span class="n">context</span><span class="p">.</span><span class="n">getTarget</span><span class="p">(),</span> <span class="mi">0</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="n">size</span><span class="p">.</span><span class="n">width</span><span class="p">,</span> <span class="n">size</span><span class="p">.</span><span class="n">height</span><span class="p">);</span>

<span class="n">formatList</span> <span class="p">=</span> <span class="n">pixbuf</span><span class="p">.</span><span class="n">getFormats</span><span class="p">();</span>
<span class="n">pixbufFormats</span> <span class="p">=</span> <span class="n">formatList</span><span class="p">.</span><span class="n">toArray</span><span class="p">!</span><span class="n">PixbufFormat</span><span class="p">();</span>
</code></pre></div></div>

<p>What we’re doing here is:</p>

<ul>
  <li><code class="language-plaintext highlighter-rouge">getAllocation()</code> gets us the size of the <code class="language-plaintext highlighter-rouge">DrawingArea</code>,</li>
  <li><code class="language-plaintext highlighter-rouge">getTarget()</code> (found inside the call to <code class="language-plaintext highlighter-rouge">getFromSurface()</code>) gets us the <em>Cairo</em> <code class="language-plaintext highlighter-rouge">Surface</code> which allows us to…</li>
  <li><code class="language-plaintext highlighter-rouge">getFromSource()</code> to grab the <code class="language-plaintext highlighter-rouge">Pixbuf</code>, and from that…</li>
  <li>we can use <code class="language-plaintext highlighter-rouge">getFormats()</code> to get the linked list of format strings, and finally</li>
  <li>use a bit of <em>D</em> magic in the form of <code class="language-plaintext highlighter-rouge">toArray!PixbufFormat()</code> to fill the <code class="language-plaintext highlighter-rouge">pixbufFormats</code> array.</li>
</ul>

<p>And what’s a <code class="language-plaintext highlighter-rouge">PixbufFormat</code>? It’s a class that keeps track of details of a <code class="language-plaintext highlighter-rouge">Pixbuf</code> format… its name, mime types, license associated with the image type, the file name extensions usually used for that image… all kinds of stuff. But for now, all we’re concerned with are the format names.</p>

<p>Now, we’ve already looked at how to set of a font with size, color and all that, so we’ll skip <em>Callback Chunk #2</em> and go to…</p>

<h3 id="callback-chunk-3">Callback Chunk #3</h3>

<p>The code that digs the format names out of the <code class="language-plaintext highlighter-rouge">PixbufFormat</code> array and writes them to screen looks like this:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">foreach</span><span class="p">(</span><span class="n">pixbufFormat</span><span class="p">;</span> <span class="n">pixbufFormats</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">context</span><span class="p">.</span><span class="n">moveTo</span><span class="p">(</span><span class="mi">40</span><span class="p">,</span> <span class="n">y</span><span class="p">);</span>
	<span class="n">format</span> <span class="p">=</span> <span class="n">pixbufFormat</span><span class="p">.</span><span class="n">getName</span><span class="p">();</span>
	<span class="n">context</span><span class="p">.</span><span class="n">showText</span><span class="p">(</span><span class="n">format</span><span class="p">);</span>
	<span class="n">y</span> <span class="p">+=</span> <span class="mi">30</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>

<p>What we have here is:</p>

<ul>
  <li>a standard <code class="language-plaintext highlighter-rouge">foreach()</code> loop,</li>
  <li>a <code class="language-plaintext highlighter-rouge">moveTo()</code> call for placement (with y being previously set and, in a moment, interated),</li>
  <li>a call to <code class="language-plaintext highlighter-rouge">PixbufFormat.getName()</code> to grab the text,</li>
  <li><code class="language-plaintext highlighter-rouge">showText()</code> to slap it into the window, and finally</li>
  <li>that iteration I mentioned in point two of this list.</li>
</ul>

<h2 id="conclusion">Conclusion</h2>

<p>And that’s the first step in working with images. Over the next few posts, we’ll look at how to load image, how to save them, and then after a short side trip into animating text, we’ll look at how to load a bunch of images to use in a flipbook animation.</p>

<p>And you don’t wanna miss that, right?</p>

<div class="blog-nav">
	<div style="float: left;">
		<a href="./0060-cairo-iv-fill-arc-cartoon-mouth.html">Previous: Cairo Arc Fill &amp; Precision Drawing</a>
	</div>
	<div style="float: right;">
		<a href="./0062-cairo-vi-load-display-images.html">Next: Cairo Load &amp; Display Images</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0061-cairo-v-toy-text-image-formats.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
